@include('Home.head')
<style>
    .layui-upload-img {
        width: 92px;
        height: 92px;
        margin: 0 10px 10px 0;
    }
</style>
<body>
<div class="container" id="app">
    @include('Home.member.header')
    <div class="my-nav-bar">
        <ol class="am-breadcrumb">
            <li><a href="#">首页</a></li>
            <li><a href="#">问题反馈</a></li>
        </ol>
    </div>
    <div class="am-cf cart-panel">
        <div class="withdrawals-panel">
            <form class="am-form">
                <div class="am-form-group">
                    <input type="text" class="am-form-field  my-radius" v-model="feebback.title" placeholder="请输入反馈标题">
                </div>
                <div class="am-form-group">
                    <textarea class="" rows="5" id="doc-ta-1" v-model="feebback.content" placeholder="请输入您的问题具体内容"></textarea>
                </div>
                <div class="am-form-group">
                    <div class="layui-upload">
                        <button type="button" class="layui-btn" id="test3">上传图片</button>
                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;" v-show="ImgName !=''">
                            预览图：
                            <div class="layui-upload-list" id="demo3">
                                <img v-for="val,index in ImgName" :src="val"  alt="" class="layui-upload-img" v-on:click="del(index)">
                            </div>
                        </blockquote>
                    </div>
                </div>
                <p class="am-text-center am-form-group"><button type="button" class="am-btn am-btn-danger am-radius am-btn-block" v-on:click="add()" style="border-radius: 50px;border: none;background-color: #000000;color: rgb(255,215,0);">立即提交</button></p>
                    {{--<a class="am-form-group" href="tel:023-8684-8908"><i class="am-icon-phone"></i>--}}
                        {{--<span>--}}
                            {{--客服电话：--}}
                        {{--</span>--}}
                        {{--023-8684-8908--}}
                    {{--</a>--}}
            </form>
        </div>
    </div>
    <div class="am-cf am-padding-sm" >
        <ul class="am-comments-list am-comments-list-flip">
            <li class="am-comment"  v-for="val,index in replyList">
                <div class="am-comment-main" style="margin-left: 0px;">
                    <header class="am-comment-hd">
                        <div class="am-comment-meta">
                            <a href="#link-to-user" class="am-comment-author">反馈 @{{ val.count }}</a>（@{{ val.title }}）
                            <time datetime="2013-07-27T04:54:29-07:00" title="最后的通信时间" class="am-fr">@{{ val.created_at }}</time>
                        </div>
                    </header>
                    <div class="am-comment-bd">
                       问题：@{{ val.content }}
                    </div>
                    <div class="am-comment-bd" style="color:red;" v-show="val.status==1">
                        答复：@{{ val.answer }}
                    </div>
                    <div class="am-comment-bd" style="color:red;" v-show="val.status==0">
                        暂未未回复
                    </div>
                </div>
            </li>
            {{--<li class="am-comment">--}}
                {{--<div class="am-comment-main" style="margin-left: 0px;">--}}
                    {{--<header class="am-comment-hd">--}}
                        {{--<div class="am-comment-meta">--}}
                            {{--<a href="#link-to-user" class="am-comment-author">官方回复</a>--}}
                            {{--<time datetime="2013-07-27T04:54:29-07:00" title="最后的通信时间" class="am-fr">2018-7-11 18:00</time>--}}
                        {{--</div>--}}
                    {{--</header>--}}
                    {{--<div class="am-comment-bd">--}}
                        {{--一般每个月15号左右统一结算--}}
                    {{--</div>--}}
                {{--</div>--}}
            {{--</li>--}}
            <li class="am-comment am-comment-flip"><!-- 头像显示在右手边 am-comment-flip -->
                <a href="">
                    <!-- <img class="am-comment-avatar" src="default/img1.jpg" alt=""/>  -->
                </a>
            </li>
        </ul>
    </div>

    @include('Home.foot')
</div>
</body>
<script>
    layui.use(['form', 'upload'], function(){
        var form = layui.form, upload = layui.upload;
        //商品相册上传
        upload.render({
            elem: '#test3'
            ,url: '/upload?_token='+'{{csrf_token()}}'+'&folder=shop'//上传接口
            ,multiple: true
            ,done: function(res){
                if (res.code) {
                    app.ImgName.push(res.data.thumb);
                } else {
                    layer.msg(res.data);
                }
            }
            ,error: function(err){
                //请求异常回调
                layer.msg('格式错误');
            }
        });


    });
</script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            title: '问题反馈',
            signStatus:'',
            feebback:{
                title:'',
                content:'',
                status:'0'
            },
            //反馈截图
            ImgName:[],
            //反馈回复
            replyList:{}
        },
        methods: {
            initialize:function () {
                $.post("/home/feedback/find",{'_token':'{{csrf_token()}}'},function (res) {
                    if(res.code){
                        app.replyList = res.data;
                    } else {
                        layer.msg(res.data);
                    }
                });
            },
            //添加反馈
            add:function () {
                that = this;
                $.post("/home/feedback/add",{'_token':'{{csrf_token()}}',feebback:app.feebback,ImgName:app.ImgName},function (res) {
                    if(res.code){
                        layer.msg(res.data,{time:600},function () {
                            that.initialize();
                            app.feebback.title = '';
                            app.feebback.content = '';
                        },500);
                    } else {;
                        layer.msg(res.data);
                    }
                });
            },

        },
        //自动执行
        mounted: function () {
            this.initialize();//分公司
        }
    })
</script>
</html>
